import React from 'react'
// import Home from './pages/Home'
// import About from './pages/About'
// import Test1 from './pages/Test1'
// import Test2 from './pages/Test2'
// 引入useRoutes
// import { useRoutes } from 'react-router-dom'
// 引入路由表
import routes from './routes'

import { Routes, Route, Link, NavLink, useRoutes } from 'react-router-dom'
export default function App() {
  return (
    <div>
      App
      <hr />
      <h1>react-router-dom</h1>
      <NavLink
        // NavLink和Link写to属性时,填入的路径,最好写完整路径
        to="/home"
        style={({ isActive }) => {
          return isActive ? { color: 'green', fontSize: 30 } : {}
        }}
        // 添加了end属性之后.当前路径所对应的路由规则的嵌套路由如果导航高亮了,则这个导航按钮不会高亮
        end
      >
        首页
      </NavLink>
      &nbsp; &nbsp;
      <NavLink
        to="/about?name=zs"
        style={({ isActive }) => {
          // 函数的返回值会赋值给style属性
          return isActive ? { color: 'green', fontSize: 30 } : {}
        }}
        state={[1, 2, 3]}
      >
        关于页
      </NavLink>
      <hr />
      {useRoutes(routes)}
      <hr />
    </div>
  )
}
